<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15.13.DOM-节点操作-节点优化</title>
</head>

<body>
    <!-- 节点优化 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>

    <script>
        //1. 父级节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box')；
        // 得到的是 离元素最近的父级节点(亲爸爸) 如果找不到父节点 返回为null
        console.log(erweima.parentNode);
        console.log('-------------------------------');

        // 2.子级节点 parentNode.childNodes(标准)  得到所有的子节点 包含 元素节点 文本节点等等
        var ul = document.querySelector('ul');
        // var lis=ul.querySelectorAll('li');
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        console.log('-------------------------------');

        // 3.子元素节点（重点掌握此方法）children  实际开发常用的
        console.log(ul.children);
        console.log('-------------------------------');

        // 4.兄弟节点 
        // （1）node.Sibling 得到的是下个兄弟节点 包含元素节点或者文本节点等等
        var div = document.querySelector('div');
        console.log(div.nextSibling);
        console.log('-------------------------------');

        // （2）node.previousSibling 得到的是上个兄弟节点 包含元素节点或者文本节点等等
        console.log(div.previousSibling);
        console.log('-------------------------------');

        // （3）node.nextElementSiling 得到的是下个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log('-------------------------------');

        // （3）node.previousElementSibling 得到的是上个兄弟元素节点
        console.log(div.previousElementSibling);
        console.log('-------------------------------');

        // （4）解决兼容性问题 自己封装一个兼容性的函数
        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }
    </script>
</body>

</html>